<input id="picture_number{$hotelId}"type="hidden" value="{$imageCount}" />
<div id="galery_panel" >
    <div id="picture_panel">
	<style>
	#picture_frame{$hotelId}
{
    background:#000;
    min-width:350px;
    min-height:234px;
    max-width: 350px;
    max-height: 234px;
	height:234px;
    transition:1s,height;
}
	#picture_frame{$hotelId} img {
	height:234px;
	position:relative;
	top:0px;
    -webkit-transition: all 1s ;
	-moz-transition: all 1s ;
	-ms-transition: all 1s ;
	-o-transition: all 1s ;
	transition: all 1s ;
}
#picture_frame{$hotelId}.load  img{
	min-height:0px;
    height:0px;
    top:110px;    
}
	</style>
        <div id="picture_frame{$hotelId}" align="center">
        {if $imageCount neq 0}
            <img src="{$hotel[0].url}" style="display:block; max-width: 350px; max-height: 234px;" id="picture{$hotel[0].id}" />
        {else}
            <img src="../../images/missing_photo.png" style="display:block; max-width: 350px; max-height: 234px;" class="picture_not_found" />
        {/if}
        </div>
    </div>
    <div id="tumbnails_panel">
        <div id="tumbnails_frame" align="center">
        {foreach $hotel as $image}
            <label onclick="show_picture({$image.id},this);">
                <img src="{$image.thumbnailUrl}" width="50" height="40" {if $image.caption neq ""}alt="{$image.caption}"{/if}/>
            </label>
        {/foreach}
        </div>
    </div>
</div>
        <div id="disclaimer_content" style="padding:5px;">
            <p>Note: It is the responsibility of the hotel chain and/or the individual property to ensure the accuracy of the photos displayed. We are not responsible for any inaccuracies in the photos.</p>
        </div>